<template>
  <el-dialog
    title="外观设置"
    custom-class="area-info-dlg"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :append-to-body="true"
    :modal="false"
    top="30vh"
    width="25%"
  >
    <div class="demo-style">
      <div
        class="target-dis"
        :style="{ backgroundImage: backgroundImageValue }"
      />
    </div>
    <div>
      <div class="i">
        <div class="i-na">
          操作对象
        </div>
        <div class="i-val">
          <el-radio
            v-model="tarDom"
            label="homeMapMask"
          >
            首页-地图遮罩
          </el-radio>
          <el-radio
            v-model="tarDom"
            label="homeHeadMask"
          >
            首页-头部遮罩
          </el-radio>
        </div>
      </div>
      <div class="i">
        <div class="i-na">
          渐变类型
        </div>
        <div class="i-val">
          <el-radio
            v-model="gradientType"
            label="linear"
          >
            线性
          </el-radio>
          <el-radio
            v-model="gradientType"
            label="radial"
          >
            径向
          </el-radio>
        </div>
      </div>
      <div class="i">
        <div class="i-na">
          颜色1开始位置
        </div>
        <div class="i-val">
          <el-progress
            class="val-pro"
            :percentage="sColor.pos"
            color="limegreen"
          />
          <el-button-group>
            <el-button
              size="small"
              icon="el-icon-minus"
              @click="sColor.pos = valMM(sColor.pos)"
            />
            <el-button
              size="small"
              icon="el-icon-plus"
              @click="sColor.pos = valAA(sColor.pos)"
            />
          </el-button-group>
        </div>
      </div>
      <div class="i">
        <div class="i-na">
          颜色1透明度
        </div>
        <div class="i-val">
          <el-progress
            class="val-pro"
            :percentage="sColor.opa"
            color="limegreen"
          />
          <el-button-group>
            <el-button
              size="small"
              icon="el-icon-minus"
              @click="sColor.opa = valMM(sColor.opa)"
            />
            <el-button
              size="small"
              icon="el-icon-plus"
              @click="sColor.opa = valAA(sColor.opa)"
            />
          </el-button-group>
        </div>
      </div>
      <div class="i">
        <div class="i-na">
          颜色2开始位置
        </div>
        <div class="i-val">
          <el-progress
            class="val-pro"
            :percentage="eColor.pos"
            color="limegreen"
          />
          <el-button-group>
            <el-button
              size="small"
              icon="el-icon-minus"
              @click="eColor.pos = valMM(eColor.pos)"
            />
            <el-button
              size="small"
              icon="el-icon-plus"
              @click="eColor.pos = valAA(eColor.pos)"
            />
          </el-button-group>
        </div>
      </div>
      <div class="i">
        <div class="i-na">
          颜色3透明度
        </div>
        <div class="i-val">
          <el-progress
            class="val-pro"
            :percentage="eColor.opa"
            color="limegreen"
          />
          <el-button-group>
            <el-button
              size="small"
              icon="el-icon-minus"
              @click="eColor.opa = valMM(eColor.opa)"
            />
            <el-button
              size="small"
              icon="el-icon-plus"
              @click="eColor.opa = valAA(eColor.opa)"
            />
          </el-button-group>
        </div>
      </div>

      <div class="i">
        <div class="i-na">
          操作
        </div>
        <div class="i-val">
          <el-button>保存到本地</el-button>
          <el-button @click="reset">
            重置当前操作对象
          </el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>

export const defSet = {
  homeMapMask: {
    gradientType: 'radial',
    sColor: {
      val: '255,255,255',
      pos: 0,
      opa: 0
    },
    eColor: {
      val: '0,0,0',
      pos: 85,
      opa: 70
    }
  },
  homeHeadMask: {
    gradientType: 'linear',
    sColor: {
      val: '0,0,0',
      pos: 0,
      opa: 40
    },
    eColor: {
      val: '255,255,255',
      pos: 100,
      opa: 0
    }
  }
};
export function getStyleStr (info) {
  const { gradientType, sColor, eColor } = info;
  return `${gradientType}-gradient(
  rgba(${sColor.val},${sColor.opa / 100}) ${sColor.pos}%,
  rgba(${eColor.val},${eColor.opa / 100}) ${eColor.pos}%)`;
}
const tempValues = {};

export default {
  data () {
    return {
      dialogVisible: false,
      gradientType: 'radial',
      tarDom: 'homeMapMask',
      sColor: {
        val: '255,255,255',
        pos: 0,
        opa: 0
      },
      eColor: {
        val: '0,0,0',
        pos: 100,
        opa: 100
      }
    };
  },
  // watch: {
  // 	tarDom: {
  // 		handler(nv, ov) {
  // 			tempValues[ov] = {
  // 				gradientType: this.gradientType,
  // 				sColor: Json.parse(JSON.stringify(this.sColor)),
  // 				eColor: Json.parse(JSON.stringify(this.eColor))
  // 			};
  // 			const { sColor, eColor } = tempValues[nv] || defSet[nv];
  // 			this.sColor = sColor;
  // 			this.eColor = eColor;
  // 		},
  // 		immediate: true
  // 	}
  // },
  computed: {
    backgroundImageValue () {
      const { gradientType, sColor, eColor } = this;
      const val = getStyleStr({ gradientType, sColor, eColor });
      this.$store.commit('app/setMaskValues', {
        key: this.tarDom,
        value: val
      });
      return val;
    }
  },
  methods: {
    show () {
      const { sColor, eColor } = defSet[this.tarDom];
      this.sColor = JSON.parse(JSON.stringify(sColor));
      this.eColor = JSON.parse(JSON.stringify(eColor));
      this.dialogVisible = true;
    },
    reset () {
      const { sColor, eColor } = defSet[this.tarDom];
      this.sColor = JSON.parse(JSON.stringify(sColor));
      this.eColor = JSON.parse(JSON.stringify(eColor));
    },
    valAA (v) {
      if (v >= 1000) {
        return 1000;
      } else {
        return v + 5;
      }
    },
    valMM (v) {
      if (v <= 0) {
        return 0;
      } else {
        return v - 5;
      }
    }
  }
};
</script>

<style>
.i-val .el-radio__label {
  color: #fff;
}
</style>

<style lang="less" scoped>
.demo-style {
  width: 200px;
  padding: 8px;
  height: 200px;
  background-color: rgba(0, 109, 100, 1);
  margin: 0 auto;
  border: 1px solid #ccc;
  .target-dis {
    width: 100%;
    height: 100%;
  }
}
.i {
  display: flex;
  margin: 16px;
  .i-na {
    color: #fff;
    font-size: 16px;
    margin: 0 8px;
    width: 110px;
  }
  .i-val {
    display: flex;
    width: 80%;
    .val-pro {
      width: 80%;
    }
  }
}
</style>
